<template>
  <div>
    <transition name="fade">
      <div
        v-if="showSidebar"
        class="sidebar-overlay"
        @click="closeSidebar"
        @contextmenu.prevent.stop=""
      >
        <transition
          name="slide"
          mode="out-in"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
        >
          <div class="sidebar-content" v-if="showSidebar" @click.stop>
            <div class="content-top"></div>
            <div class="content">
              <!-- 侧边栏菜单和内容区保持不变 -->
              <div class="sidebar">
                <ul>
                  <li
                    v-for="(item, index) in menuItems"
                    :key="index"
                    @click="setActiveItem(index)"
                    :class="{ active: activeItemIndex === index }"
                  >
                    <button class="menu-btn">{{ item }}</button>
                  </li>
                </ul>
              </div>
              <div class="components">
                <div v-show="activeItemIndex === 0">
                  <div class="slider-demo-block">
                    <span class="demonstration">搜索栏高度</span>
                    <el-slider
                      v-model="searchHeight"
                      @input="Height"
                      :min="36"
                      :max="60"
                    />
                    <span class="demonstration">{{ searchHeight }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">搜索栏宽度</span>
                    <el-slider
                      v-model="searchWidth"
                      @input="width"
                      :min="3"
                      :max="17"
                    />
                    <span class="demonstration">{{ searchWidth }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">搜索栏圆角</span>
                    <el-slider
                      v-model="searchRadius"
                      @input="Radius"
                      :min="0"
                      :max="50"
                    />
                    <span class="demonstration">{{ searchRadius }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">搜索栏透明</span>
                    <el-slider
                      v-model="SearchTransparency"
                      @input="Transparency"
                      :min="10"
                      :max="100"
                    />
                    <span class="demonstration">{{ SearchTransparency }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span>搜索历史</span>
                    <el-switch v-model="history" @change="historychange" />
                  </div>
                  <div class="slider-demo-block">
                    <span>是否聚焦搜索栏</span>
                    <el-switch
                      v-model="shouldFocus"
                      @change="shouldFocuschange"
                    />
                  </div>
                </div>

                <div v-show="activeItemIndex === 1">
                  <div class="slider-demo-block">
                    <span class="demonstration">模糊度</span>
                    <el-slider
                      v-model="localBlurAmount"
                      @input="amount"
                      :min="0"
                      :max="30"
                    />
                    <span class="demonstration">{{ localBlurAmount }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">遮罩浓度</span>
                    <el-slider
                      v-model="localOpacity"
                      @input="opacity"
                      :min="0"
                      :max="99"
                    />
                    <span class="demonstration">{{ localOpacity }}%</span>
                  </div>
                  <bgimglist></bgimglist>
                  <upload></upload>
                  <VideoUpload></VideoUpload>
                </div>

                <div v-show="activeItemIndex === 2">
                  <div class="slider-demo-block">
                    <span>新标签页打开搜索结果</span>
                    <el-switch v-model="newtab" @change="newtabchange" />
                  </div>
                  <div class="slider-demo-block">
                    <span>底部dock容器</span>
                    <el-switch v-model="dock" @change="dockchange" />
                  </div>
                  <div class="slider-demo-block">
                    <span>侧边栏分组常显</span>
                    <el-switch v-model="sidebars" @change="sidebarschange" />
                  </div>
                  <div class="slider-demo-block">
                    <span>分组显示添加网址icon</span>
                    <el-switch
                      v-model="showaddurl"
                      @change="showaddurlchange"
                    />
                  </div>
                </div>

                <div v-show="activeItemIndex === 3">
                  <div class="slider-demo-block">
                    <span class="demonstration">图标大小</span>
                    <el-slider
                      v-model="squareSize"
                      @input="squareSizechange"
                      :min="30"
                      :max="80"
                    />
                    <span class="demonstration">{{ squareSize }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">图标圆角弧度</span>
                    <el-slider
                      v-model="radius"
                      @input="radiuschange"
                      :min="0"
                      :max="50"
                    />
                    <span class="demonstration">{{ radius }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">图标间隔</span>
                    <el-slider
                      v-model="boxgap"
                      @input="boxgapchange"
                      :min="0"
                      :max="50"
                    />
                    <span class="demonstration">{{ boxgap }}</span>
                  </div>
                  <div class="slider-demo-block">
                    <span class="demonstration">文字颜色</span>
                    <ColorPicker
                      v-model="selectedColor"
                      @color-selected="handleColorSelected"
                    ></ColorPicker>
                  </div>
                </div>

                <div v-show="activeItemIndex === 4"></div>
                <div v-show="activeItemIndex === 5">
                  <div class="slider-demo-block" @click="myexportData()">
                    导出本地数据
                  </div>
                  <div class="slider-demo-block">
                    <input
                      type="file"
                      id="fileUploader"
                      accept=".tab"
                      @change="myimportData"
                      style="display: none"
                    />
                    <label for="fileUploader">导入本地数据</label>
                  </div>
                  <div class="slider-demo-block">导入云端数据</div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, watch, defineExpose } from "vue";
import upload from "../ImageUpload/index.vue";
import VideoUpload from "../videupload/index.vue";
import bgimglist from "../bgimgList/index.vue";
import ColorPicker from "../colorPicker/index.vue";
import { exportData, importData } from "@/util/file.js";

const beforeEnter = (el) => {
  el.style.transform = "translateX(100%)";
  el.style.opacity = "0";
};

const enter = (el, done) => {
  setTimeout(() => {
    el.style.transform = "translateX(0)";
    el.style.opacity = "1";
    done();
  }, 100);
};

const leave = (el, done) => {
  el.style.transform = "translateX(100%)";
  el.style.opacity = "0";
  done();
};

const store = useStore();

const myexportData = () => {
  exportData(store.getters.getstate);
};

const myimportData = (event) => {
  console.log(event);
  const file = event.target.files[0];
  importData(file);
};

const localBlurAmount = ref(store.getters.getamount);
function amount(value) {
  store.commit("amount", value);
}

const selectedColor = store.getters["getfontcolor"];

const handleColorSelected = (color) => {
  store.commit("setfontcolor", color);
};

watch(
  () => store.getters.getamount,
  (newValue) => {
    localBlurAmount.value = newValue;
  }
);

const localOpacity = ref(store.getters.getopacity);
function opacity(value) {
  store.commit("opacity", value);
}
watch(
  () => store.getters.getopacity,
  (newValue) => {
    localOpacity.value = newValue;
  }
);

const searchHeight = ref(store.getters.getSearchHeight);
function Height(value) {
  store.commit("searchHeight", value);
}
watch(
  () => store.getters.getSearchHeight,
  (newValue) => {
    searchHeight.value = newValue;
  }
);
const searchWidth = ref(store.getters.getsearchWidth);
function width(value) {
  store.commit("searchWidth", value);
}
watch(
  () => store.getters.getsearchWidth,
  (newValue) => {
    searchWidth.value = newValue;
  }
);

const searchRadius = ref(store.getters.getSearchRadius);
function Radius(value) {
  store.commit("searchRadius", value);
}
watch(
  () => store.getters.getSearchRadius,
  (newValue) => {
    searchRadius.value = newValue;
  }
);

const SearchTransparency = ref(store.getters.getSearchTransparency);
function Transparency(value) {
  store.commit("searchTransparency", value);
}
watch(
  () => store.getters.getSearchTransparency,
  (newValue) => {
    SearchTransparency.value = newValue;
  }
);

const menuItems = ref([
  "搜索框",
  "壁纸",
  "页面设置",
  "图标设置",
  "时间日期",
  "系统数据",
]);

const activeItemIndex = ref(0);

const setActiveItem = (value) => {
  activeItemIndex.value = value;
};

const showSidebar = ref(false);
const openSidebar = () => {
  showSidebar.value = true;
};
defineExpose({ openSidebar });

const closeSidebar = () => {
  showSidebar.value = false;
};

const newtab = ref(store.getters["getnewtab"]);
watch(
  () => store.getters["getnewtab"],
  (newValue) => {
    newtab.value = newValue;
  }
);
const newtabchange = (value) => {
  store.commit("newtab", value);
};

const history = ref(store.getters["gethistory"]);
watch(
  () => store.getters["gethistory"],
  (newValue) => {
    history.value = newValue;
  }
);
const historychange = (value) => {
  store.commit("history", value);
};

const shouldFocus = ref(store.getters["getshouldFocus"]);
watch(
  () => store.getters["getshouldFocus"],
  (newValue) => {
    shouldFocus.value = newValue;
  }
);
const shouldFocuschange = (value) => {
  store.commit("setshouldFocus", value);
};

const dock = ref(store.getters["getdock"]);
watch(
  () => store.getters["getdock"],
  (newValue) => {
    dock.value = newValue;
  }
);
const dockchange = (value) => {
  store.commit("dock", value);
};

const sidebars = ref(store.getters["getsidebars"]);
watch(
  () => store.getters["getsidebars"],
  (newValue) => {
    sidebars.value = newValue;
  }
);
const sidebarschange = (value) => {
  store.commit("setsidebars", value);
};

const showaddurl = ref(store.getters["getshowaddurl"]);
watch(
  () => store.getters["getshowaddurl"],
  (newValue) => {
    showaddurl.value = newValue;
  }
);
const showaddurlchange = (value) => {
  store.commit("setshowaddurl", value);
};

const boxgap = ref(store.getters["getboxgap"]);
watch(
  () => store.getters["getboxgap"],
  (newValue) => {
    boxgap.value = newValue;
  }
);
const boxgapchange = (value) => {
  store.commit("setGap", value);
};

const squareSize = ref(store.getters["getsquareSize"]);
watch(
  () => store.getters["getsquareSize"],
  (newValue) => {
    squareSize.value = newValue;
  }
);
const squareSizechange = (value) => {
  store.commit("setSquareSize", value);
};

const radius = ref(store.getters["getradius"]);
watch(
  () => store.getters["getradius"],
  (newValue) => {
    radius.value = newValue;
  }
);
const radiuschange = (value) => {
  store.commit("setradius", value);
};
</script>

<style scoped>
/* 修改后的过渡动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
  will-change: transform, opacity;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%); /* 初始位置在屏幕右侧之外 */
  opacity: 0;
}

.slide-enter-to,
.slide-leave-from {
  transform: translateX(0); /* 最终位置在屏幕右侧 */
  opacity: 1;
}

/* 优化后的样式 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}

.sidebar-content {
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
}

.content-top {
  width: 100%;
  height: 70px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
}

.content {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.sidebar {
  width: 20%;
  background-color: #333;
  padding-top: 20px;
  height: 100%;
  overflow: hidden;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sidebar li:hover {
  background-color: #34495e;
  transform: translateX(8px);
}

.sidebar li.active {
  background-color: #16a085;
}

.menu-btn {
  background: none;
  border: none;
  color: #ecf0f1;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.menu-btn:hover {
  color: #1abc9c;
}

.menu-btn:focus {
  outline: none;
}

.components {
  flex: 1;
  height: 100%;
  padding: 10px;
  overflow: auto;
}

.slider-demo-block {
  width: 100%;
  min-height: 52px;
  padding: 10px;
  margin: 10px 0px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-demo-block:hover {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

.slider-demo-block .el-slider {
  margin-top: 0;
}

.slider-demo-block .demonstration {
  font-size: 12px;
  line-height: 44px;
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 60%;
}
</style>
